<template>
	<view class="page">
		<view class="top">
			<view class="top_t" style="display: flex; justify-content: space-between;padding: 20rpx;">
				<text class="title">选择用户</text>
				<u-icon name="play-right-fill"></u-icon>

			</view>
			<view class="line" style="display: flex; justify-content: center;align-items: center;">
				<u-line length="96%"></u-line>
			</view>
			<view class="top_b">
				<view class="user-card" v-for="(user, index) in users" :class="{ 'special-card': index === 1 }"
					:key="index">
					<image class="avatar" :src="user.avatar" style="width: 108rpx; height: 108rpx; margin-top: 18rpx;">
					</image>
					<image :src="user.avatar2" style="width: 116rpx; height: 36rpx; margin-top: -24rpx;" mode="">
					</image>
					<text class="name">{{ user.name }}</text>
					<text class="remaining">剩余{{ user.remaining }}次</text>
				</view>

			</view>
		</view>
		<view class="bot">
			<view class="top_t" style="display: flex; justify-content: space-between;padding: 20rpx;">
				<text class="title">选择时间</text>
				<u-icon name="play-right-fill"></u-icon>

			</view>
			<view class="line" style="display: flex; justify-content: center;align-items: center;">
				<u-line length="96%"></u-line>
			</view>
			<view class="tabs" style="display: flex; justify-content: space-around; margin-top: 30rpx;">
				<view v-for="(tab, index) in tabList" :key="index" @tap="selectTab(index)"
					style="display: flex; flex-direction: column; align-items: center;"
					:class="{ 'active': activeIndex === index }">
					<text>{{ tab.title }}</text>
					<text>{{ tab.name }}</text>
				</view>
			</view>
			<view class="times">
				<view class="time-slot" v-for="(time, index) in allTimes" :key="index" :class="time.status">
					<text class="time">{{ time.time }}</text>
					<text class="status">{{ time.statusText }}</text>
				</view>
			</view>
			<view class="button" style="padding: 0 30rpx;">
				<button style="background-color: #BFAC67; color: white;border-radius: 52rpx;  margin-top: 20px;" >预约</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

				users: [{
						avatar: '../../static/images_y/位图.png',
						avatar2: "../../static/images_y/jin.png",
						name: '莫娜丽莎',
						remaining: 10,
						memberType: '金卡会员'
					},
					{
						avatar: '../../static/images_y/位图.png',
						avatar2: "../../static/images_y/yin.png",
						name: '张某某',
						remaining: 10,
						memberType: '银卡会员'
					},
					{
						avatar: '../../static/images_y/位图.png',
						avatar2: "../../static/images_y/pu.png",
						name: '张某某',
						remaining: 10,
						memberType: '普通会员'
					},
				],
				activeIndex: 0,
				tabList: [{
						title: '今天',
						name: '08-03'
					},
					{
						title: '周五',
						name: '08-04'
					},
					{
						title: '周六',
						name: '08-05'
					},
					{
						title: '周日',
						name: '08-06'
					},
					{
						title: '周一',
						name: '08-07'
					},
				],
				allTimes: [{
						time: '12:00',
						status: 'available',
						statusText: '可预约'
					},
					{
						time: '12:30',
						status: 'booked',
						statusText: '已预约'
					},
					{
						time: '13:00',
						status: 'full',
						statusText: '已约满'
					},
					{
						time: '13:30',
						status: 'available',
						statusText: '可预约'
					},
					{
						time: '14:00',
						status: 'available',
						statusText: '可预约'
					},
					{
						time: '14:30',
						status: 'available',
						statusText: '可预约'
					},
					{
						time: '15:00',
						status: 'available',
						statusText: '可预约'
					},
					{
						time: '15:30',
						status: 'available',
						statusText: '可预约'
					},
				],

				// ... 其他日期的时间段信息

			};
		},
		methods: {
			selectTab(index) {
				this.activeIndex = index; // 更新选中状态
				// 处理其他逻辑，比如触发标签切换事件等
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;


		.top {
			width: 95%;
			height: 398rpx;

			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.top_b {
			display: flex;
			justify-content: space-between;

			.user-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 200rpx;
				height: 246rpx;
				background: #F2F2F2;
				border-radius: 10rpx;
				margin: 30rpx;

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #010101;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
				}

				.remaining {
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 22rpx;
					color: #C39F5B;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
					width: 118rpx;
					height: 34rpx;
					background: #EAE4DA;
					border-radius: 6rpx;
					text-align: center;

				}

			}

			.special-card {
				width: 200rpx;
				height: 246rpx;
				background: #FAF6E9;
				border-radius: 10rpx;
				margin: 30rpx;

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #010101;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
				}

				.remaining {
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 22rpx;
					color: #C39F5B;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
					width: 118rpx;
					height: 34rpx;
					background: #EAE4DA;
					border-radius: 6rpx;
					text-align: center;

				}

			}
		}

		.bot {
			width: 95%;
			height: 792rpx;

			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.active {
				border-bottom: 2px solid #C0AC67;
                 
			}

			.times {
				display: flex;
				// padding: 0 15rpx;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.time-slot {
					width: 142rpx;
					margin: 46rpx 0 0 16rpx;
					height: 142rpx;

					background: #FBFBFB;
					border-radius: 10rpx;
					border: 1rpx solid #F0F2EE;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
				}
				.available {
				  background-color: #FBFBFB ;
				  color: #C19D57;
				}
				
				.booked {
				  background-color: #C19D57;
				}
				
				.full {
				  background-color: lightgray;
				  color: grey;
				}
			}


		}

	}
</style>